<template>
  <DistributorLayout>
    <div class="commissions-page">
      <!-- 页面标题区域 -->
      <div class="page-header">
        <div class="title-area">
          <h1>佣金管理</h1>
          <p class="subtitle">查看和管理您的佣金收入和提现记录</p>
        </div>
        <div class="action-area">
          <van-button type="primary" icon="cash-back-record" @click="openWithdrawalTab">
            提现记录
          </van-button>

          <van-button type="danger" icon="cash" @click="openWithdrawalModal">
            申请提现
          </van-button>
        </div>
      </div>

      <!-- 标签页切换器 -->
      <van-tabs v-model:active="activeTab" animated swipeable>
        <van-tab title="佣金概览" name="overview">
          <CommissionOverview ref="commissionOverviewRef" />
        </van-tab>

        <van-tab title="佣金明细" name="details">
          <CommissionDetails />
        </van-tab>

        <van-tab title="提现记录" name="withdrawals">
          <!-- <WithdrawalRecords /> -->
        </van-tab>

      </van-tabs>

      <!-- 操作结果消息 -->
      <van-popup v-model:show="showMessage" position="bottom" :style="{ height: '15%' }" round closeable>
        <div class="message-container">
          <van-icon :name="messageIcon" :color="messageColor" size="24" />
          <p>{{ messageText }}</p>
        </div>
      </van-popup>

      <!-- 提现申请模态框 -->
      <WithdrawalRequestModal ref="withdrawalRequestModalRef" />
    </div>
  </DistributorLayout>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import DistributorLayout from './DistributorLayout.vue'
import CommissionOverview from '@/components/distributor/commissions/CommissionOverview.vue'
import CommissionDetails from '@/components/distributor/commissions/CommissionDetails.vue'
import WithdrawalRequestModal from '@/components/distributor/commissions/WithdrawalRequestModal.vue'
import { generateCommissionData } from '@/utils/mockData'
import router from '@/router'
// 标签页配置
// const tabs = [
//   { id: 'overview', name: '佣金概览', icon: 'fa-chart-pie' },
//   { id: 'details', name: '佣金明细', icon: 'fa-list-ul' },
//   { id: 'withdrawals', name: '提现记录', icon: 'fa-exchange-alt' },
//   { id: 'rules', name: '结算规则', icon: 'fa-file-alt' }
// ]

// 当前激活的标签页
const activeTab = ref('overview')

// 佣金数据
const commissionData = ref(null)

// 操作消息状态
const showMessage = ref(false)
const messageText = ref('')
const messageIcon = ref('success')
const messageColor = ref('#07c160')

// 提现模态框状态
// const showWithdrawalModal = ref(false)
//
// // 计算属性
// const isLoading = computed(() => !commissionData.value)
//
// // 计算属性：可提现金额
// const availableAmount = computed(() => {
//   return commissionData.value?.withdrawable || 0
// })
//
// // 计算属性：最低提现金额
// const minWithdrawalAmount = computed(() => {
//   return commissionData.value?.minWithdrawalAmount || 100
// })



// 组件挂载后加载数据
onMounted(() => {
  fetchCommissionData()
})

// 加载佣金数据
const fetchCommissionData = async () => {
  try {
    // 模拟API请求延迟
    await new Promise(resolve => setTimeout(resolve, 800))
    // 使用模拟数据
    commissionData.value = generateCommissionData()
  } catch (error) {
    console.error('获取佣金数据失败:', error)
    showMessageTip('获取数据失败，请重试', 'error')
  }
}

// 处理提现申请提交
const handleWithdrawalSubmit = async (data: { amount: number; walletAddress: string }) => {
  console.log('提现申请:', data)

  // 更新佣金数据（模拟）
  if (commissionData.value) {
    commissionData.value.withdrawable -= data.amount
    commissionData.value.withdrawn += data.amount
  }

  // 显示成功消息
  showMessageTip(`已成功申请提现 ${data.amount.toFixed(2)} 元`, 'success')

  // 切换到提现记录标签页
  setTimeout(() => {
    activeTab.value = 'withdrawals'
  }, 1000)
}

const commissionOverviewRef = ref()

// 打开提现记录标签页
function openWithdrawalTab() {
  router.push('/distributor/withdrawalPage')
  // commissionOverviewRef.value.open()
}

const withdrawalRequestModalRef = ref()

// 打开提现申请模态框
function openWithdrawalModal() {
  withdrawalRequestModalRef.value.open()
}

// 显示消息
function showMessageTip(message: string, type: 'success' | 'error' | 'info' = 'info') {
  messageText.value = message

  if (type === 'success') {
    messageIcon.value = 'success'
    messageColor.value = '#07c160'
  } else if (type === 'error') {
    messageIcon.value = 'cross'
    messageColor.value = '#ee0a24'
  } else {
    messageIcon.value = 'info'
    messageColor.value = '#1989fa'
  }

  showMessage.value = true

  // 3秒后关闭消息
  setTimeout(() => {
    showMessage.value = false
  }, 3000)
}
</script>

<style scoped lang="scss">
.commissions-page {
  background: white;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

  // 页面标题区域
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;

    .title-area {
      h1 {
        font-size: 24px;
        margin: 0 0 8px 0;
        font-weight: 600;
      }

      .subtitle {
        color: #666;
        margin: 0;
        font-size: 14px;
      }
    }

    .action-area {
      display: flex;
      gap: 12px;
    }
  }

  // 标签页切换器
  .tab-switcher {
    display: flex;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

    &::-webkit-scrollbar {
      height: 4px;
    }

    &::-webkit-scrollbar-track {
      background: #f1f1f1;
    }

    &::-webkit-scrollbar-thumb {
      background: #c1c1c1;
      border-radius: 2px;
    }

    .tab-button {
      padding: 12px 20px;
      background: none;
      border: none;
      border-bottom: 3px solid transparent;
      font-size: 15px;
      font-weight: 600;
      color: #6C757D;
      cursor: pointer;
      transition: all 0.2s ease;
      white-space: nowrap;
      display: flex;
      align-items: center;

      i {
        margin-right: 8px;
      }

      &:hover {
        color: #2F3542;
      }

      &.active {
        color: #FF4757;
        border-bottom-color: #FF4757;
      }
    }
  }

  // 标签页内容区域
  .tab-content {
    .tab-pane {
      animation: fadeIn 0.3s;
    }
  }

  // 占位内容
  .placeholder {
    padding: 40px;
    text-align: center;
    color: #999;
    background-color: #f7f8fa;
    border-radius: 8px;
    margin: 20px 0;
  }

  // 操作提示信息
  .operation-message {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;

    .message-content {
      display: flex;
      align-items: center;
      padding: 12px 16px;
      border-radius: 4px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      color: #fff;
      font-size: 14px;

      i {
        margin-right: 8px;
      }

      &.success {
        background-color: #28A745;
      }

      &.error {
        background-color: #DC3545;
      }

      &.warning {
        background-color: #FFC107;
        color: #212529;
      }

      &.info {
        background-color: #17A2B8;
      }
    }
  }

  .loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;

    p {
      margin-top: 12px;
      color: #666;
    }
  }
}

// 动画
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s, transform 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}

// 响应式调整
@media (max-width: 768px) {
  .commissions-page {
    padding: 16px;

    .page-header {
      flex-direction: column;
      align-items: flex-start;

      .title-area {
        margin-bottom: 16px;
      }

      .action-area {
        flex-direction: column;
        gap: 12px;
      }
    }

    .tab-switcher {
      .tab-button {
        padding: 10px 16px;
        font-size: 14px;
      }
    }
  }
}

:deep(.van-tabs__wrap) {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

:deep(.van-tabs__line) {
  background-color: #1989fa;
}
</style>
